<template>
  <div>
    <div id="box">
      <!-- 最顶端部分 -->
      <v-header title="商品分类" :back="true"></v-header>
      <!-- 内容区 -->
      <div id="neirong">
        <div class="left">
          <ul>
            <li v-for="item in fenlei" :key="item.id">{{item.catename}}</li>
          </ul>
        </div>
        <div class="right">
          <div class="nub1">
            <div class="dd" v-for="item in fenlei" :key="item.id">
              <h2>{{ item.catename }}</h2>
              <ul>
                <li v-for="item in item.children" :key="item.id" @click="spxq(item.id)">
                  <img :src="'http://localhost:3000'+item.img" alt="">
                  <p>{{item.catename}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      fenlei: [],
      children:[]
    };
  },
  methods:{
    spxq(id){
      this.$router.push("/spxq/"+id)
    }
  },
  mounted() {
    axios({
      url: "/api/getcates",
      method: "get",
    }).then((res) => {
      this.fenlei = res.data.list;
      this.children = res.data.list.children;
    });
  },
};
</script>

<style scoped>
/*内容区*/
.dd{
  margin-top: 0.3rem;
}
#neirong {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: space-between;
}
#neirong .left {
  width: 2.36rem;
  height: 100%;
  overflow: auto;
}
#neirong .left ul {
  width: 2.36rem;
  background: #fff;
  flex-wrap: wrap;
}
#neirong .left ul li {
  width: 2.36rem;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
  color: #9b9b9b;
  font-size: 0.26rem;
  margin: auto;
}
#neirong .left ul .li1 {
  font-size: 0.32rem;
  color: #ff6040;
  font-weight: bold;
}
#neirong .right {
  width: 4.64rem;
  margin-right: 0.2rem;
  height: 100%;
  overflow: auto;
}
#neirong .right .nub1 {
  width: 4.64rem;
  background: #fff;
  padding: 0.2rem 0 0.2rem 0.2rem;
  box-sizing: border-box;
}
#neirong .right .nub1 h2 {
  font-size: 0.32rem;
  font-weight: bold;
  margin-bottom: 0.16rem;
}
#neirong .right .nub1 ul {
  flex-wrap: wrap;
  display: flex;
}
#neirong .right .nub1 ul li {
  height: 1.6rem;
  width: 1.28rem;
  margin-right: 0.2rem;
  margin-bottom: 0.16rem;
}
#neirong .right .nub1 ul li img {
  width: 1.28rem;
  height: 1.28rem;
  margin-bottom: 0.1rem;
}
#neirong .right .nub1 ul li p {
  text-align: center;
  color: #a4a4a4;
  overflow: hidden;
  height: 0.4rem;
}
</style>